<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<%@include file="../../../include/meta.jsp"%>
<title>通用权限管理系统</title>
<%@include file="../../../include/css.jsp"%>
<style type="text/css">
.row {
	margin-bottom: 10px;
}
</style>
</head>
<body>
	<%@include file="../include/header.jsp"%>

	<nav aria-label="breadcrumb">
		<ol class="breadcrumb">
			<li class="breadcrumb-item"><a
				href="${pageContext.request.contextPath}/app/main.html"><i
					class="fas fa-home"></i>主页</a></li>
			<li class="breadcrumb-item"><a
				href="${pageContext.request.contextPath}/app/role/list.html">角色管理</a></li>
			<li class="breadcrumb-item active" aria-current="page">编辑角色</li>
		</ol>
	</nav>

	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12">
				<form
					action="${pageContext.request.contextPath}/app/role/update.html"
					method="post">
					<input type="hidden" name="id" value="${obj.id}">
					<div class="form-group row">
						<label for="name" class="col-sm-2 col-md-2 col-form-label">角色名称</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="name" name="name"
								value="${obj.name}" required>
						</div>
					</div>
					<div class="form-group row">
						<div class="col-12">
							<hr />
						</div>
					</div>
					<div class="form-group row">
						<label for="disabled" class="col-sm-2 col-md-2 col-form-label">角色权限</label>
						<div class="col-sm-10">
							<c:forEach items="${functions}" var="f">
								<div class="row">
									<div class="custom-control custom-checkbox mr-sm-2">
										<input type="checkbox" class="custom-control-input"
											id="fg${f.functionGroup.id}" name="functions"
											value="${f.functionGroup.id}"
											onchange="choose('${f.functionGroup.id}')"
											${f.functionGroup.checked?"checked":""}> <label
											class="custom-control-label" for="fg${f.functionGroup.id}">${f.functionGroup.name}</label>
									</div>
								</div>
								<div id="d${f.functionGroup.id}" class="row"
									style="padding-left: 20px;">
									<c:forEach items="${f.functionModules}" var="fm">
										<div class="custom-control custom-checkbox mr-sm-2">
											<input type="checkbox" class="custom-control-input"
												id="fm${fm.id}" name="functions" value="${fm.id}"
												onchange="chooseGroup('${f.functionGroup.id}')"
												${fm.checked?"checked":""}> <label
												class="custom-control-label" for="fm${fm.id}">${fm.name}</label>
										</div>
									</c:forEach>
								</div>
								<hr>
							</c:forEach>
						</div>
					</div>
					<div class="form-gorup row">
						<div class="col-sm-6">
							<button type="submit" class="btn btn-primary btn-block">保存</button>
						</div>
						<div class="col-sm-4">
							<button type="reset" class="btn btn-danger btn-block">重置</button>
						</div>
						<div class="col-sm-2">
							<a class="btn btn-secondary btn-block"
								href="${pageContext.request.contextPath}/app/role/list.html?page=${page}&size=${size}">返回</a>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="row">
			<div id="msg" class="col-md-12 lead text-danger">
				<!-- 操作消息 -->
				${message}
				<c:if test="${message!=null}">
					<script>
						setTimeout(function() {
							$("#msg").text("");
						}, 3000);
					</script>
				</c:if>
			</div>
		</div>
	</div>

	<%@include file="../../../include/js.jsp"%>
	<script type="text/javascript">
		function choose(id) {
			$("#d" + id + " input[type='checkbox']").each(
					function(index, element) {
						$(element).prop("checked",
								$("#fg" + id).prop("checked"));
					});
		}
		function chooseGroup(id) {
			var checked = false;
			$("#d" + id + " input[type='checkbox']").each(
					function(index, element) {
						if ($(element).prop("checked")) {
							checked = true;
							return;
						}
					});
			$("#fg" + id).prop("checked", checked);
		}
	</script>
</body>
</html>